<template>
    <div class="l-from-body">
        <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="100px">
            <el-col :span="24">
                <el-form-item :label="$t('组件编码')" prop="lr_datav_component_f_Code">
                    <el-input v-model="formData.lr_datav_component_f_Code"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('组件分类')" prop="lr_datav_component_f_Type">
                    <l-tree-select v-model="formData.lr_datav_component_f_Type" :options="categoryData">
                    </l-tree-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('组件名称')" prop="lr_datav_component_f_Name">
                    <el-input v-model="formData.lr_datav_component_f_Name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item :label="$t('组件数据')" prop="lr_datav_componentdetail_f_Component">
                    <l-code-mirror v-model="formData.lr_datav_componentdetail_f_Component" style="height: 360px" />
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-check" @click="handleOption">{{ $t('运行') }}</el-button>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item :label="$t('组件预览')" prop="f_View">
                    <avue-echart-vue :option="vueOption" width="100%" height="100%"></avue-echart-vue>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
    import AvueEchartVue from '../../components/vue';
    const api = window.$api.vdata.component;
    export default {
        components: {
            AvueEchartVue,
        },
        props: {
            categoryData: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                rules: {
                    lr_datav_component_f_Code: [
                        { required: true, message: this.$t("请输入编号"), trigger: "blur" },
                        {
                            validator: this.lr_existDbFiled,
                            keyValue: () => {
                                return this.formData.lr_datav_component_f_Id;
                            },
                            tableName: "lr_datav_coment",
                            fieldName: "f_Code",
                            keyName: "f_Id",
                            trigger: "null",
                        },
                    ],
                    lr_datav_component_f_Name: [{ required: true, message: this.$t("请输入组件名称") }],
                    lr_datav_component_f_Type: [
                        { required: true, message: this.$t("请选择分组"), trigger: "blur" },
                    ],
                },
                formData: {
                lr_datav_component_f_Id: '',
                lr_datav_component_f_Code:"", // 组件编码
                lr_datav_component_f_Name:"", // 组件名称
                lr_datav_component_f_Type:"", // 组件分类
                lr_datav_componentdetail_f_Component:"", // 组件json

            },
                vueOption: {},
            };
        },
        created() {
        },
        methods: {
            resetForm() {
                this.formData.lr_datav_component_f_Id = ''
                this.formData.lr_datav_componentdetail_f_ComponentId = ''
                this.formData.lr_datav_componentdetail_f_Id = ''
                this.vueOption = {}
                this.$refs.form && this.$refs.form.resetFields();
            },
            // 校验表单
            async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            
            return true
        },
            setForm(data) {
                this.$setFormData(this.formData,data.lrDatavComponentEntity,'lr_datav_component')
            this.$setFormData(this.formData,data.lrDatavComponentdetailEntity,'lr_datav_componentdetail')
            },
            getForm() {
                const formData = {}
            formData.lrDatavComponentEntity = this.$getFormData(this.formData,'lr_datav_component')
            formData.lrDatavComponentdetailEntity = this.$getFormData(this.formData,'lr_datav_componentdetail')
            return formData
            },
            handleOption() {
                this.$set(this.vueOption, 'f_Content', this.formData.lr_datav_componentdetail_f_Component)
            },
            async loadFormData({ keyValue}) {
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },
        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.lrDatavComponentEntity.f_Id = keyValue
                return await this.$awaitWraper(api.add(postData))
            }
        },
        }
    }
</script>